<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    
    <div @click="exportFn">导出页面-获取页面节点，绘制界面转为文件流进行导出</div>
    <div @click="exportStyleFn">导入导出 导入 使用属性（cellDates: true）时间转为中国标准时间 时间差 43秒 获取数据，绘制界面转为文件流进行导出</div>
    <div @click="exportStyleJSFn">导出页面</div>

    <div @click="printFn">打印界面--（打包上线，样式混乱或直接样式丢失，有限制图片文件大小,不建议用）</div>
    <div @click="printFn2">打印界面-插件(vue-easy-print)--慢，我感觉慢,没什么大问题）</div>
    <div @click="printFn3">打印界面-vue-print-nb 自定义指令打印</div>
   
    <div @click="printFn4">打印界面-(window.print)--(原生，可缩放界面进行打印,但是在打印element-ui绘制的table时，数据过多，过长时，表格会错位，如果列数固定，可给固定宽度解决)</div>
    <div @click="printFn5">打印界面-(print-js,html2canvas)--(转为图片进行打印，图片越大越慢)</div>
  </div>

  
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
  },
  methods:{
    exportFn(){
      this.$router.push("/exportTable")
    },
    exportStyleFn(){
      this.$router.push("/exportTableChecked")
    },
    exportStyleJSFn(){
      this.$router.push("/exportTablejs")
    },
    printFn(){
      this.$router.push('/print')
    },
    printFn2(){
      this.$router.push('/printTwo')
    },
    printFn3(){
      this.$router.push('/printThree')
    },
    printFn4(){
      this.$router.push('/printFour')
    },
    printFn5(){
      this.$router.push('/printFive')
    }
    
  }
}
</script>
<style scoped>
div{
  margin:10px;
}
</style>
